<div id="content">
  <div class="row s_page_title">
    <sa-big-breadcrumbs [items]="['设备安装管理','维修管理V2','维修明细']" icon="fa fa-wrench"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
  </div>

  <sa-widgets-grid>
    <div class="s_table">
      <div sa-widget [editbutton]="false" color="darken" class="clearfix">
        <header><span class="widget-icon"> <i class="fa fa-table"></i> </span>
          <h2>维修明细</h2>
        </header>
        <div>
          <div class="widget-body no-padding">
            <div class="page-header clearfix s_table_opreation">
              <div class="left page-header-btn" style="width: calc(100% - 220px);">
                <!-- <sa-company-tree-car companyTreeId="companyTree" [isShowCarSort]="true" (companySelected)="companySelected($event)"></sa-company-tree-car> -->
                <sa-company-tree-car companyTreeId="companyTree" (companySelected)="companySelected($event)">
                </sa-company-tree-car>
                <!-- <div class="top_module">
                                    <span class="module_text">用户名</span>
                                    <div class="s_hover_box">
                                        <select class="select2" id="userNameSelect2" style="width: 150px;">
                                            <option value=''></option>
                                        </select>
                                        <div class="s_del_icon" (click)='delUserName()'>x</div>
                                    </div>
                                </div> -->

                <div class="top_module top_module_box" style="min-width: auto;">
                  <span class="top_module_label module_text">故障类型</span>
                  <select name="" class="top_module_select" [(ngModel)]="type" style="min-width: 110px;">
                    <option value="">全部</option>
                    <option *ngFor="let item of typeList;let idx = index;" [value]="idx*1+1">
                      {{item}}</option>
                  </select>
                </div>
                <!-- <div class="top_module top_module_box" style="min-width: auto;">
                                    <span class="top_module_label module_text">故障状态</span>
                                    <select name="" class="top_module_select" [(ngModel)]="repairedStatus" style="min-width: 110px;">
                                        <option value="">全部</option>
                                        <option value="0">待维修</option>
                                        <option value="1">已维修</option>
                                    </select>
                                </div> -->

                <!-- <div class="top_module top_module_box" style="min-width: auto;">
                                    <span class="top_module_label module_text">维修时间排序</span>
                                    <select name="" class="top_module_select" [(ngModel)]="sortType" style="min-width: 110px;">
                                        <option value="1">升序</option>
                                        <option value="2">降序</option>
                                    </select>
                                </div> -->
                <div class="selectDate top_module">
                  <div class="input-daterange input-group s_selected_time_box s_hover_box">
                    <input type="text" [(ngModel)]='startTime' class="form-control s_selected_time" id="datetimepicker3"
                      autocomplete="off" placeholder="选择开始时间" />
                    <span class="s_selected_time_spe">至</span>
                    <input type="text" [(ngModel)]='endTime' class="form-control s_selected_time" id="datetimepicker4"
                      autocomplete="off" placeholder="选择结束时间" />
                    <div class="s_del_icon" (click)='del_date()'>x</div>
                  </div>
                </div>
                <button class="btn btn-primary" (click)="table_search()">查询</button>
              </div>
              <div class="right top-search">
                <input type="text" [(ngModel)]="searchKey" (change)="table_search()" class="search-input"
                  placeholder="车牌号/公司名称/维修编号">
                <span class="top-search-box">
                  <button class="top-search-btn" type="button" (click)="table_search()"> <i
                      class="fa fa-search"></i></button>
                </span>
              </div>
            </div>
            <!-- 分类 -->
            <div class="" style="">
              <ul class="nav nav-tabs" id="myTab"
                style="padding-left:12px;background-image: linear-gradient(#F1F5FD, #E9F0FF);padding: 0;">
                <li class="active s-lis"><a data-toggle="tab" (click)="btnClick('')">全部 </a></li>
                <li class="s-lis"><a data-toggle="tab" href="" (click)="btnClick('1')">离线问题</a></li>
                <li class="s-lis"><a data-toggle="tab" href="" (click)="btnClick('2')">GPS问题</a></li>
                <li class="s-lis"><a data-toggle="tab" href="" (click)="btnClick('3')">传感器问题</a></li>
                <li class="s-lis"><a data-toggle="tab" href="" (click)="btnClick('4')">甩挂问题</a></li>
              </ul>
            </div>
            <div class="table_scroll">
              <table
                class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
                <thead>
                  <tr>
                    <th>操作</th>
                    <th>车牌号码</th>
                    <th>设备ID</th>
                    <th>公司名称</th>
                    <th>车辆用途</th>
                    <th>维修编号</th>
                    <th>维修时间</th>
                    <th>故障现象</th>
                    <th>故障类型</th>
                    <th>维修内容</th>
                    <th>故障现象详情</th>
                    <!-- <th>维修前图片</th>
                                        <th>维修后图片</th> -->
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let row of tableData; let i = index" [attr.data-index]="i">
                    <td><button *ngIf="row.type!==12" type="button" (click)="open_img(row,ImgModal)">图片</button></td>
                    <td>{{row.carNumber}}</td>
                    <td>{{row.deviceId}}</td>
                    <td>{{row.companyName}}</td>
                    <td>{{row.useTypeL2}}</td>
                    <td>{{row.repairedNumber}}</td>
                    <td>{{row.repairedTime}}</td>
                    <td>
                      {{pTypeList[row.pType*1-1]}}
                    </td>
                    <td>
                      {{typeList[row.type*1-1]}}
                    </td>
                    <td>
                      {{row.repairContentStr}}
                    </td>
                    <td>
                      {{row.faultPhenomenon}}
                    </td>
                    <!-- <td>
                        <span *ngIf="row.beforeImageInfo">
                            <button type="button" (click)="open_img('before',row,ImgModal)" *ngIf="row.beforeImageInfo&&row.beforeImageInfo.length > 0 ">查看</button>
                        </span>
                    </td>
                    <td>
                        <span *ngIf="row.afterImageInfo">
                            <button type="button" (click)="open_img('after',row,ImgModal)" *ngIf="row.afterImageInfo&&row.afterImageInfo.length > 0">查看</button>
                        </span>
                    </td> -->
                    <td>
                      <button type="button" (click)="editLogRow(row,editLogModal)">编辑日志</button>
                      <button type="button" (click)="editRow(row,editModal)" *ngIf="editCheck">编辑</button>
                      <button type="button" (click)="deleteRow(row)">删除</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="table-fix clearfix">
              <paginator [totalRecords]="totalCount" [rows]="pageSize" [currentPage]="curPage - 1"
                (onPageChange)="paginate($event)">
              </paginator>
              <button type="button" class="btn default refresh_btn" (click)="refresh()"><i
                  class="fa fa-refresh"></i></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </sa-widgets-grid>
  <!-- 编辑   弹窗-->
  <section bsModal #editModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
    aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="editClose(editModal)" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">编辑</h4>
        </div>
        <div class="modal-body" style="min-height: 250px;">
          <div class="row form-horizontal">
            <div class="form-group col-xs-12">
              <label class="control-label col-xs-2">维修内容<sup>*</sup></label>
              <div class="col-xs-10">
                <div *ngFor="let item of repairContent;let i= index" style="margin-bottom: 10px;">
                  <input type="text" class="repairContent col-xs-10" autocomplete="off" name="repairContent"
                    [value]="item?item:''" placeholder="请填写维修内容" (change)="contentChange($event.target.value,i)" />
                  <span class="addBtn" *ngIf="i==0" (click)="addNum(i)"><i class="fa fa-plus"
                      aria-hidden="true"></i></span>
                  <span class="addBtn" *ngIf="i>0" (click)="reduceNum(i)"><i class="fa fa-minus"
                      aria-hidden="true"></i></span>
                </div>

              </div>
            </div>
            <div class="form-group col-xs-12">
              <label class="control-label col-xs-2">故障现象<sup>*</sup></label>
              <div class="col-xs-10">
                <div class="clearfix">
                  <select class="form-control" name="repairedPType" style="width: 100%" [(ngModel)]='repairedPType'
                    (change)="repairedPTypeChange()">
                    <option value="1">离线问题</option>
                    <option value="2">GPS问题</option>
                    <option value="3">传感器问题</option>
                    <option value="4">甩挂问题</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="form-group col-xs-12">
              <label class="control-label col-xs-2 noPadding">故障现象详情<sup>*</sup></label>
              <div class="col-xs-10">
                <div class="clearfix">
                  <select class="form-control" name="faultPhenomenon" style="width: 100%" [(ngModel)]='faultPhenomenon'>
                    <option *ngFor="let item of faultPhenomenonList" [value]="item.value">
                      {{item.label}}</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="form-group col-xs-12">
              <label class="control-label col-xs-2">故障类型<sup>*</sup></label>
              <div class="col-xs-10">
                <div class="clearfix">
                  <select class="form-control" name="repairedType" style="width: 100%" [(ngModel)]='repairedType'>
                    <option value="1">更换主机</option>
                    <option value="2">电源维修</option>
                    <option value="3">更换线材</option>
                    <option value="4">挪动天线位置</option>
                    <option value="5">更换天线</option>
                    <option value="6">V4换V7</option>
                    <option value="7">更换传感器</option>
                    <option value="8">重新焊接</option>
                    <option value="9">离线其他</option>
                    <option value="10">GPS其他</option>
                    <option value="11">传感器其他</option>
                    <option value="12">无维修</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" (click)="editClose(editModal)">取消</button>
          <button type="button" class="btn btn-primary" (click)="editSubmit(editModal)">提交</button>
        </div>
      </div>
    </div>
  </section>
  <!-- 编辑 弹窗end-->

  <!-- 图片查看   弹窗-->
  <!-- <section bsModal #ImgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" (click)="imgClose(ImgModal)" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">{{imageType}}图片</h4>
                </div>
                <div class="modal-body" style="max-height: 520px; overflow: auto;">
                    <div class="row form-horizontal imagesInfo" *ngIf='imagesInfo.length != 0'>
                        <div class="imagesList imagesList-sensor">
                            <div class="imgContList">
                                <div class="imgCont" *ngFor="let row of imagesInfo" (click)="bigimg()">
                                    <img class="imgSrc" [src]="row" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section> -->
  <!-- 图片查看 弹窗end-->

  <!-- 图片查看   弹窗-->
  <section bsModal #ImgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
    aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width: 800px;">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="imgClose(ImgModal)" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">图片查看</h4>
        </div>
        <div class="modal-body">
          <div class="row form-horizontal imagesInfoShow">
            <div class="form-group col-xs-12 imagesInfo">
              <div class="col-xs-6 imgContList">
                <p class="imgTit">维修前</p>
                <div class="col-xs-12 imgViewMain">
                  <div class="col-xs-12 imgViewCont" *ngFor="let row of beforeImageInfo">
                    <div class="col-xs-3 imgViewTit"><span>{{row.name}}</span></div>
                    <div class="col-xs-9 imgViewList">
                      <img class="imgViewShow" *ngFor="let item of row.imageUrl" [src]='item' [alt]='row.name'
                        (click)="bigimg()" />
                    </div>
                  </div>
                </div>

              </div>
              <div class="col-xs-6 imgContList">
                <p class="imgTit">维修后</p>
                <div class="col-xs-12 imgViewMain">
                  <div class="col-xs-12 imgViewCont" *ngFor="let row of afterImageInfo">
                    <div class="col-xs-3 imgViewTit"><span>{{row.name}}</span></div>
                    <div class="col-xs-9 imgViewList">
                      <img class="imgViewShow" *ngFor="let item of row.imageUrl" [src]='item' [alt]='row.name'
                        (click)="bigimg()" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- 图片查看 弹窗end-->

  <!-- 变更日志 -->
  <div bsModal #editLogModal="bs-modal" id="editLogModal" class="modal fade" tabindex="-1" role="dialog"
    aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" style="width: 900px;">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="cancelEditLogModalModal(editLogModal)" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">编辑日志</h4>
        </div>
        <div class="modal-body" style="padding: 15px 15px 30px 15px">
          <div class="table_scroll">
            <table
              class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
              <thead>
                <tr>
                  <th>操作</th>
                  <th>故障现象</th>
                  <th>维修人员</th>
                  <th>故障类型</th>
                  <th>维修内容</th>
                  <th>故障现象详情</th>
                  <th>更新时间</th>
                </tr>
              </thead>
              <tbody>

                <tr *ngFor="let row of editLogTableData">
                  <td>{{row.logType}}</td>
                  <td>{{pTypeList[row.pType*1-1]}}</td>
                  <td>{{row.repairedUserName}}</td>
                  <td>{{typeList[row.type*1-1]}}</td>
                  <td>
                    <span *ngIf="row.repairContent && row.repairContent.length">{{row.repairContent.join(',')}}</span>
                  </td>
                  <td>{{row.faultPhenomenon}}</td>
                  <td>{{row.updateDate}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 变更日志 end-->
</div>
<style type="text/css">
  .btn_ground .active {
    color: #1A6DDD;
    font-size: 16px;
    font-weight: bold;
  }

  .btn_color {
    background-color: #fff;
    margin-right: 12px;
    height: 24px;
    line-height: 24px;
    border: none;
    min-width: 46px;
    text-decoration: underline;
  }

  .btn_color:hover {
    color: #1A6DDD;
    font-size: 16px;
    font-weight: bold;
  }

  /* 弹出层 */
  .small_img_box {
    text-align: center;
    padding: 12px 0;
  }

  .picture {
    min-height: 100px;
    width: 100%;
    height: auto;
  }

  .img_desc .arrow {
    display: inline-block;
    cursor: pointer;
    vertical-align: top;
    height: 80px;
    line-height: 80px;
    padding: 0 15px;
  }

  .img_desc .arrow.notAllow {
    cursor: not-allowed;
  }

  .small_img {
    width: 80px;
    height: 80px;
    overflow: hidden;
    display: inline-block;
    border: 2px solid #ccc;
  }

  .small_img.active {
    border: 2px solid #1A6DDD;
  }

  .small_img:hover {
    border: 2px solid #1A6DDD;
  }

  .small_img .img {
    width: 100%;
    height: auto;
  }

  .radioSales {
    margin: 8px 8px 0 0;
    /* padding-top: 29px; */
    position: relative;
    top: 1px;
  }
</style>